/**
 * 
 * @author José María Valera Reales <@Chemaclass>
 */
$(document).ready(function() {

    //$('#miTabla').DataTable();

//Ocultamos el indicador de carga
    $('#indicador').hide();

    /**
     * Establecer un texto para el div indicador y mostrarlo
     * @param {type} nClass
     * @param {type} txt
     * @returns {undefined}
     */
    function indicador(nClass, txt) {
        $('#indicador').text(txt);
        $('#indicador').attr("class", "text-" + nClass);
        $('#indicador').show();
    }

    /**
     * Creamos un listener onclick para el botón de búsqueda
     */
    $('#buscar').click(function(event) {
        event.preventDefault();
        var form = $(this).parent('form');
        var abuscar = $(form).find('.abuscar').val();
        var que = $(form).find('select option:selected').val();
        console.log("abuscar: " + abuscar);
        var params = {abuscar: abuscar, que: que};
        //Obtenemos el cuerpo de la tabla
        var tbody = $('#nombres table tbody');
        $.ajax({
            url: 'ajax/nombres/search',
            data: params,
            type: 'POST',
            beforeSend: function() {
                indicador('info', 'Cargando...');
            }, success: function(resp) {
                $(tbody).empty();
                //recorremos cada elemento del json recibido
                $.each(resp, function(i, item) {
                    $(tbody).append(getFila(item));
                });
                indicador('success', 'Búsqueda realizada con éxito');

                //Cargamos los listener para eliminar
                cargarListenerEliminar();

            }, error: function(err) {
                indicador('danger', 'No se encontraron resultados...');
                //vaciamos las posibles noticias 
                //if (abuscar.length > 0) {
                $(tbody).empty();
                // }
                //alert("No se ha encontrado nigún resultado...");
            }
        });
    });

    /**
     * Establecer el foco en el input cuando se cambie el select
     */
    $('#buscador select').change(function() {
        var form = $(this).parent('form');
        //Establecemos el foco en el input
        $(form).find('.abuscar').focus();
        $('#buscar').trigger('click');
    });

    /**
     * Lanzar un trigger al event click del buscador
     */
    $('#buscador .abuscar').keyup(function() {
        $('#buscar').trigger('click');
    });

    /**
     * Creamos un listener onclick para el botón de búsqueda
     */
    $('#crear').click(function(event) {
        event.preventDefault();
        var params = $(this).parent('form').serialize();
        $.ajax({
            url: 'ajax/nombres/create',
            data: params,
            type: 'POST',
            beforeSend: function() {
                indicador('info', 'Añadiendo nuevo nombre...');
            }, success: function(resp) {
                //Añadimos la fila al cuerpo de la tabla
                $('#nombres table tbody').append(getFila(resp));
                indicador('success', 'Nuevo nombre añadido con éxito.');
            }, error: function(err) {
                console.log("ERROR: " + err);
            }
        });
    });

    /**
     * 
     * @param json item Elemento nombre
     * @returns string Elemento tr y su html completo
     */
    function getFila(item) {
        //Creamos los enlaces CRUD
        /*var e1 = '<a class="btn btn-info btn-xs" '
         + 'href= "nombres/' + item.id + '">Ver</a> ';
         var e2 = '<a class="btn btn-warning btn-xs editar" '
         + 'href="nombres/' + item.id + '/edit">Editar</a> ';
         var e3 = '<a class="btn btn-danger btn-xs eliminar" '
         + 'href="nombres/' + item.id + '/delete">Eliminar</a> ';*/
        //Creamos los enlaces CRUD
        var e1 = '<a class="btn btn-info btn-xs" '
                + 'href= "nombres/' + item.id + '">Ver</a> ';
        var e2 = '<a class="btn btn-warning btn-xs editar" '
                + 'href="ajax/nombres/edit">Editar</a> ';
        var e3 = '<a class="btn btn-danger btn-xs eliminar">Eliminar</a> ';
        //Creamos la fila
        var fila = "<tr>"
                + "<td class='hide'>" + item.id + " </td>"
                + "<td>" + item.nombre + "</td>"
                + "<td>" + item.genero + "</td>"
                + "<td>" + item.color + "</td>"
                + "<td>" + item.tamano + "</td>"
                + "<td class='btns-crud'>"
                + e1 + e2 + e3
                + "</td>"
                + "</tr>";
        return fila;
    }

    cargarListenerEliminar();

    /**
     * Añadir el listener a las clases .eliminar
     * Es necesario volver a añadir los listener a los nuevos elementos
     * Por ello llamaremos a esta función después de hacer una búsqueda, por ejemplo.
     */
    function cargarListenerEliminar() {
        /**
         * Listener para eliminar un nombre
         */
        $('.eliminar').click(function(event) {
            event.preventDefault();
            var fila = $(this).parents('tr');
            var id = $(fila).find('td').first().text();
            var params = {id: id};
            console.log("id: " + id + ", params.id: " + params.id);
            if (confirm(lang.estas_seguro)) {
                $.ajax({
                    url: 'ajax/nombres/delete',
                    data: params,
                    type: 'DELETE',
                    beforeSend: function() {
                        indicador('info', 'Eliminando el nombre...');
                    }, success: function(resp) {
                        if (resp.id !== id) {
                            console.log("error");
                            console.log("id: " + id + ", resp.id: " + resp.id);
                        } else {
                            //Eliminamos la fila
                            $(fila).remove();
                            indicador('success', 'Nombre eliminado con éxito.');
                        }
                    }, error: function(err) {
                        console.log("ERROR: " + err);
                    }
                });
            }
        });

    }
});

$(document).on("ajax:before", "*[data-spinner]", function() {

});